<template>
  <div class="right-side-container">
    <div
      v-if="store.currentComponentIndex === -1"
      class="content flex justify-content-center align-items-center"
    >
      点击题型进行编辑
    </div>
    <div v-else>
      <EditPanel
        :serialNum="serialNum[store.currentComponentIndex]"
        :com="currentCom"
        @finishEdit="store.currentComponentIndex = -1"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useEditorStore } from '@/stores/useEditor';
import EditPanel from '@/components/Editor/EditPanel/index.vue';
import { useSurveyNo } from '@/utils/hooks';

const store = useEditorStore();
const currentCom = computed(() => store.coms[store.currentComponentIndex]);
const serialNum = computed(() => useSurveyNo(store.coms).value);
</script>

<style scoped lang="scss">
.right-side-container {
  width: 340px;
  height: calc(100vh - 50px - 30px);
  position: fixed;
  right: 20px;
  top: 70px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-menu-border-color);
  border-radius: var(--border-radius-md);
  overflow-y: scroll;
}
.content {
  height: 100%;
}
</style>
